<template>
  <div class="page-container">
    <div class="w-full">
      <!-- 搜索卡片 -->
      <div class="search-card">
        <el-form :model="searchForm" label-width="80px" class="search-form">
          <el-form-item label="厂商名称" class="search-form-item">
            <el-input v-model="searchForm.name" placeholder="请输入厂商名称" class="search-input"></el-input>
          </el-form-item>
          <div class="search-buttons">
            <el-button  @click="getLists" size="default" class="search-button">查询</el-button>
            <el-button @click="resetSearch" size="default" class="reset-button">重置</el-button>
            <el-button type="primary" @click="handleAdd" size="default" class="add-button" icon="Plus">新增</el-button>
          </div>
        </el-form>
      </div>

      <!-- 厂商卡片列表 -->
      <div v-if="lists.length > 0"
        class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 2xl:grid-cols-5 gap-6">
        <div v-for="item in lists" :key="item.id" class="bg-white rounded-lg p-6 border border-gray-200 hover:shadow-md">
          <!-- 卡片头部 -->
          <div class="flex items-start justify-between mb-4">
            <div class="flex items-center space-x-3">
              <div class="w-12 h-12  rounded-lg flex items-center justify-center">
                <img src="/assets/images/mxcs.svg" class="w-12 h-12 " />
              </div>
              <div>
                <h3 class="text-lg font-semibold text-gray-800 group-hover:text-blue-600 transition-colors">
                  {{ item.name }}
                </h3>
                <p class="text-xs text-gray-500">模型提供商</p>
              </div>
            </div>
            <div class="w-2 h-2 bg-green-400 rounded-full animate-pulse"></div>
          </div>

          <!-- 详细信息 -->
          <div class="space-y-3 mb-6">
            <div class="bg-gray-50 rounded-lg p-3">
              <label class="text-xs font-medium text-gray-500 uppercase tracking-wider">API密钥</label>
              <div class="mt-1 flex items-center space-x-2">
                <span class="text-sm font-mono text-gray-800 bg-gray-100 px-2 py-1 rounded">
                  {{ item.apikey ? item.apikey.substring(0, 8) + '...' : '未设置' }}
                </span>
                <button @click="copyToClipboard(item.apikey)"
                  class="text-gray-400 hover:text-gray-600 transition-colors cursor-pointer" title="复制API密钥">
                 <img src="/assets/images/copy.svg" class="w-5 h-5" />
                </button>
              </div>
            </div>

            <div v-if="item.remark" class="bg-gray-50 rounded-lg p-3">
              <label class="text-xs font-medium text-gray-500 uppercase tracking-wider">备注信息</label>
              <p class="text-sm text-gray-700 mt-1 line-clamp-2">{{ item.remark }}</p>
            </div>
          </div>

          <!-- 操作按钮 -->
          <div class="flex items-center justify-between pt-4 border-t border-gray-100">
            <div class="flex space-x-2">
              <el-button size="small" type="primary" plain @click="handleAdd(item)" icon="Edit">
                编辑
              </el-button>
              <el-button size="small" type="danger" plain @click="handleDelete(item)" icon="Delete">
                删除
              </el-button>
            </div>
            <div class="text-xs text-gray-400">ID: {{ item.id }}</div>
          </div>
        </div>
      </div>

      <!-- 空状态 -->
      <div v-else class="flex flex-col items-center justify-center py-20">
        <div class="w-20 h-20 bg-gray-100 rounded-full flex items-center justify-center mb-4">
          <img src="/assets/images/mxcs.svg" class="w-12 h-12" />
        </div>
        <h3 class="text-lg font-medium text-gray-900 mb-2">暂无模型厂商</h3>
        <p class="text-sm text-gray-500 mb-6">开始添加您的第一个AI模型提供商</p>
        <el-button type="primary" @click="handleAdd"> 添加模型厂商 </el-button>
      </div>
    </div>
  </div>
  <edit ref="editRef" @success="getLists" />
</template>

<script lang="ts" setup>
import edit from './edit.vue'
import { getManufacturerListApi, deleteManufacturerApi } from '@/api/ai'
import { ElMessage, ElMessageBox } from 'element-plus'
import { onMounted, ref } from 'vue'

const searchForm = ref({
  name: '',
})

const lists = ref<any[]>([])
const getLists = async () => {
  const { data } = await getManufacturerListApi({
    name: searchForm.value.name,
  })
  console.log(data, 123)
  lists.value = data
}

const resetSearch = () => {
  searchForm.value = {
    name: '',
  }
  getLists()
}

const editRef = ref<typeof edit>()
const handleAdd = (row: any) => {
  editRef.value?.open(row)
}
const handleDelete = (row: any) => {
  ElMessageBox.confirm('确定要删除吗？', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning',
  }).then(() => {
    deleteManufacturerApi(row.id).then(() => {
      getLists()
      ElMessage.success('删除成功')
    })
  })
}

const copyToClipboard = async (text: string) => {
  try {
    await navigator.clipboard.writeText(text)
    ElMessage.success('API密钥已复制到剪贴板')
  } catch (err) {
    console.error('Failed to copy text: ', err)
    ElMessage.error('复制失败，请手动选择复制')
  }
}

onMounted(() => {
  getLists()
})
</script>
<style scoped>
/* 搜索卡片样式 */
.search-card {
  background: #ffffff;
  border-radius: 8px;
  padding: 20px;
  margin-bottom: 20px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

/* 搜索表单样式 */
.search-form {
  display: flex;
  align-items: center;
  gap: 16px;
}

.search-form-item {
  margin-bottom: 0;
  flex: 0 0 auto;
}
</style>
